<template>
  <!--  查询 -->
  <div>
    <el-input placeholder="请输入客户姓名" style="width:200px" v-model="queryName"></el-input>
    <el-button @click="queryByName" type="success" plain>查询</el-button>
    <el-button @click="showCustomernurseitemnurseitemDialog" type="primary" style="width: 100px; margin-left: 50px;font-weight: bolder; font-size: 16px">
      登&emsp;记
    </el-button>
  </div>
  <!--  显示所有客户信息 table自动循环-->
  <div>{{errorMessage}}</div>
  <el-table :data="customernurseitemList">
    <el-table-column label="序号" type="index" width="60px"></el-table-column>
    <el-table-column prop="customerName" label="客户姓名" width="80px"></el-table-column>
    <el-table-column prop="levelName" label="护理等级" width="80px"></el-table-column>
    <el-table-column prop="nursingName" label="护理项目" width="80px"></el-table-column>


    <!--      <template #default="scope">-->
    <!--        {{scope.row.customernurseitemSex === 0?'男':'女'}}-->
    <!--      </template>-->

    <el-table-column prop="nurseNumber" label="购买数量" width="80px"></el-table-column>
    <el-table-column prop="buyTime" label="服务购买日期" width="120px" :formatter="formatDate"></el-table-column>
    <el-table-column prop="maturityTime" label="服务到期时间" width="120px" :formatter="formatDate"></el-table-column>
    <el-table-column  label="操作">
      <template #default="scope">
        <el-button type="primary" @click="showEditDialog(scope.row.id)">修改</el-button>
        <el-button type="danger" @click="removeOne(scope.row.id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

  <div class="example-pagination-block">
    <el-pagination background
                   v-model:current-page="pageContains.pageNum"
                   v-model:page-size="pageContains.pageSize"
                   :page-sizes="[10,20,30,50,100]"
                   layout="total, sizes, prev, pager, next, jumper"
                   :total="pageContains.total"
                   @size-change="handleSizeChange"
                   @current-change="handlePageChange"
    />
  </div>

  <!--  客户信息对话框 -->
  <el-dialog v-model="customernurseitemDialog" :title="dialogTitle">
    <el-form :model="curCustomernurseitem">
      <el-form-item label="客户姓名">
        <el-col :span="11">
          <el-select v-model="curCustomernurseitem.customerName">
            <el-option
                v-for="cutomer in customerOptions"

                :key="cutomer.id"
                :label="cutomer.customerName"
                :value="cutomer.customerName"
            >
            </el-option>
          </el-select>
        </el-col>
      </el-form-item>

      <el-form-item label="护理等级">
        <el-col :span="11">
          <el-select v-model="curLevelName" placeholder="需编辑护理名称前选择（可选）">
            <el-option
                v-for="level in levelOptions"

                :key="level.id"
                :label="level.levelName"
                :value="level.levelName"
            >
            </el-option>
          </el-select>
        </el-col>
      </el-form-item>
      <el-form-item label="护理项目">
        <el-col :span="11">
          <el-select v-model="curCustomernurseitem.nursingName">
            <el-option
                v-for="nursing in nursingOptions"

                :key="nursing.id"
                :label="nursing.nursingName"
                :value="nursing.nursingName"
            >
            </el-option>
          </el-select>
        </el-col>
      </el-form-item>
      <el-form-item label="购买数量">
        <el-col :span="11">
          <el-input v-model="curCustomernurseitem.nurseNumber"></el-input>
        </el-col>
      </el-form-item>
      <!--      <el-form-item label="性&emsp;&emsp;别">-->
      <!--        <el-col :span="11">-->
      <!--          <el-select v-model="curCustomernurseitem.customernurseitemSex">-->
      <!--            <el-option-->
      <!--                v-for="item in sexOptions"-->
      <!--                :label="item.label"-->
      <!--                :value="item.value"-->
      <!--            >-->
      <!--            </el-option>-->
      <!--          </el-select>-->
      <!--        </el-col>-->
      <!--      </el-form-item>-->

      <el-form-item label="服务购买日期">
        <el-col :span="11">
          <el-date-picker v-model="curCustomernurseitem.buyTime"></el-date-picker>
        </el-col>
      </el-form-item>
      <el-form-item label="服务到期时间">
        <el-col :span="11">
          <el-date-picker v-model="curCustomernurseitem.maturityTime"></el-date-picker>
        </el-col>
      </el-form-item>
    </el-form>
    <el-button @click="optOne()">{{buttonOpt}}</el-button>
  </el-dialog>
</template>

<script setup>
import {ref, onMounted, reactive, watch} from "vue";
import http from '@/axios/http';
import qs from "qs";
// 存放用户数据集合
let customernurseitemList = ref([]);

//报错提示
let errorMessage = ref("")

//模糊查询绑定的 客户名称
let queryName = ref("")

//对话框显示控制
let customernurseitemDialog = ref(false)


//绑定下拉框数据
let customerOptions = ref({});
let nursingOptions = ref({});
let levelOptions = ref({});

//客户信息，或者编辑已有客户的 绑定数据
let curCustomernurseitem = ref({
  customer: {
    customerName: ""
  },
  levelName: {
    levelName: ""
  },
  nursingName: {
    nursingName: ""
  },

});

//登记、修改客户信息弹出框的 标题和操作按钮  显示文字
let dialogTitle = reactive("")
let buttonOpt = reactive("")

//对话框操作类型：1：添加 2：编辑
let dialogOptType = reactive(1)
let size = 10; //当前显示多少行
let pageNum = 1; // 当前页码
let pageSize = 10; //每页显示行数

//当前页码信息
let pageContains = ref({})

//性别数组（其他字典值查询出来也是同样数据结构，使用方法类似）
let sexOptions = ref([
  {
    label: '男',
    value: 0
  },{
    label: '女',
    value: 1
  }
])

//根据客户姓名模糊查询客户信息
function queryByName(){

  let param = {
    customerName : queryName.value
  }

  http.post('/lyy/get_customernurseitems_by', param).then(
      (res)=>{
        let result = res.data;
        // 返回结果传给 customernurseitemList
        if(result.result === 'success'){
          customernurseitemList.value = result.data;
        } else {
          errorMessage.value = result.error;
        }

      }
  )
}

//单击登录按钮事件
function showCustomernurseitemnurseitemDialog() {
  // 查询要修改的数据后，清空数据
  curCustomernurseitem.value = {};

  curLevelName.value = "";

  //获取下拉框关联的数据

  getustomernameData();
  getNursingnameData();
  getLevelnameData();

  dialogTitle = "客户护理设置录入";
  buttonOpt="录入"



  //弹出客户信息对话框
  customernurseitemDialog.value = true;
  dialogOptType = 1 //设置当前操作类型标志是 录入


}

//关闭客户信息对话框
function closeCustomernurseitemnurseitemDialog(){
  customernurseitemDialog.value = false;
}

//页面初始化
onMounted(
    ()=>{
      init();
    }
)

function init(){
  //查询所有用户信息
  getAllCustomernurseitemnurseitems();
  //查询需要的字典（{标志1: 值1, 标志2: 值2}）
  //用的时候取 字典[字段值（字典标志）]
}


function getAllCustomernurseitemnurseitems(){
  let params = ref({
    size: size,
    pageNum: pageNum,
    pageSize: pageSize
  })

  http.post('/lyy/get_all_customernurseitems', params.value).then(
      (res)=>{
        let result = res.data;
        // 返回结果传给 customernurseitemList
        if(result.result === 'success'){
          pageContains.value = result.data;
          //pageContains.list = null;
          customernurseitemList.value = result.data.list;

        } else {
          errorMessage.value = result.error;
        }

      }
  )
}

//格式化日期
function formatDate(row, column){
  let data = row[column.property];

  if(data == null){
    return null;
  }

  let dt = new Date(data);
  return dt.getFullYear() + '-' + (dt.getMonth() + 1) + '-' + dt.getDate()
  //+ ' ' + dt.getHours() + ':' + dt.getMinutes() + ':' + dt.getSeconds()
}

function recordOne(){
  let param = curCustomernurseitem.value;
  http.post('/lyy/add_one_customernurseitem', param).then(
      (res)=>{
        let result = res.data;
        // 返回结果传给 customernurseitemList
        if(result.result === 'success'){
          //关闭对话框
          closeCustomernurseitemnurseitemDialog()

          //刷新客户列表
          getAllCustomernurseitemnurseitems();
        } else {
          errorMessage.value = result.error;
        }

      }
  )
}


//显示编辑对话框
function showEditDialog(customernurseitemid){
  //根据id查询客户信息
  getCustomernurseitemnurseitemInfo(customernurseitemid)

  getustomernameData();
  getNursingnameData();
  getLevelnameData();

  //显示对话框
  console.log(customernurseitemid)
  customernurseitemDialog.value = true;
  dialogTitle = "客户护理设置修改";
  buttonOpt="修改"

  dialogOptType = 2 //设置当前操作类型标志是 修改

  curLevelName.value = "";
}

function getCustomernurseitemnurseitemInfo(customernurseitemid){
  let param = {
    customernurseitemid : customernurseitemid
  }
  http.post('/lyy/getcustomernurseitemby_id', qs.stringify(param)).then(
      (res)=>{
        let result = res.data;
        // 返回结果传给 customernurseitemList
        if(result.result === 'success'){
          curCustomernurseitem.value = result.data;
        } else {
          errorMessage.value = result.error;
        }

      }
  )
}


//获取下拉框关联的数据
function getustomernameData(){
  //获取下拉框的数据
  http.post('/lyy/get_all_customername').then(
      (res)=>{
        let result = res.data;
        // 返回结果传给 customerOptions
        if(result.result === 'success'){
          customerOptions.value = result.data;
        } else {
          errorMessage.value = result.error;
        }

      }
  )

}

function getNursingnameData(){
  //获取下拉框的数据
  http.post('/lyy/get_all_nursingname').then(
      (res)=>{
        let result = res.data;
        // 返回结果传给 nursingOptions
        if(result.result === 'success'){
          nursingOptions.value = result.data;
        } else {
          errorMessage.value = result.error;
        }
      }
  )

}

function getLevelnameData(){

  http.post('/lyy/get_all_levelname').then(
      (res)=>{
        let result = res.data;
        // 返回结果传给 nursingOptions
        if(result.result === 'success'){
          levelOptions.value = result.data;
        } else {
          errorMessage.value = result.error;
        }
      }
  )
}

//记录当前选中的护理内容的等级名称
let curLevelName = ref("");

// 监听护理等级变化
watch(curLevelName, (newVal) => {
  //根据等级筛选护理内容
  if (newVal) {

    curCustomernurseitem.value.levelName=newVal;
    //传递的参数形式，必须为这种形式
    let param = {
      levelname : newVal
    }
    //根据护理等级改变护理内容选项
    http.post('/lyy/getnursingname_by_levelname',qs.stringify(param)).then(
        (res)=>{
          let result = res.data;
          // 返回结果传给 nursingOptions
          if(result.result === 'success'){
            nursingOptions.value = result.data;
          } else {
            errorMessage.value = result.error;
          }
        }
    )

  }
});


//删除客户
function removeOne(customernurseitemid){
  if (window.confirm('你确定要删除这条记录吗？')) {
    let param = {
      customernurseitemid: customernurseitemid
    }
    http.post('/lyy/removecustomernurseitem_by_id', qs.stringify(param)).then(
        (res) => {
          let result = res.data;
          // 返回结果传给 customernurseitemList
          if (result.result === 'success') {
            getAllCustomernurseitemnurseitems();
          } else {
            errorMessage.value = result.error;
          }

        }
    )
  }
}

function editOne(){
  let param = curCustomernurseitem.value;
  http.post('/lyy/modifycustomernurseitemby_id', param).then(
      (res)=>{
        let result = res.data;
        if(result.result === 'success'){
          //curCustomernurseitem.value = result.data;
          closeCustomernurseitemnurseitemDialog();
          getAllCustomernurseitemnurseitems();

        } else {
          errorMessage.value = result.error;
        }

      }
  )
}

function optOne(){
  if(dialogOptType === 1){
    recordOne()
  } else if(dialogOptType === 2) {
    editOne()
  }
}

//分页处理
const handlePageChange = (pageNum1)=>{
  pageNum = pageNum1
  getAllCustomernurseitemnurseitems()
}

const handleSizeChange = (pageSize1)=>{
  pageSize = pageSize1
  getAllCustomernurseitemnurseitems()
}
</script>

<style scoped>

</style>